<template>
  <div class="review">
    <el-button type="primary" @click="back" size="mini">返回</el-button>
    <el-form
      :model="form"
      ref="form"
      label-width="100px"
      class="demo-ruleForm formDemo"
      size="small"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="作品名称">
            <el-input v-model="form.title" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="作者">
            <el-input v-model="form.authorName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创作类型">
            <el-input v-model="form.creationTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剧本分类">
            <el-input v-model="form.chooseCreationTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拍摄场景">
            <el-input v-model="form.sceneName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角色数量">
            <el-input v-model="form.roleNumberName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展现类型">
            <el-input v-model="form.showTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="观看类型">
            <el-input v-model="form.scanTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格">
            <el-input v-model="form.price" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="剧本简介">
            <el-input v-model="form.description" type="textarea" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="剧本内容">
<!--            <el-input v-model="form.content" type="textarea" readonly></el-input>-->
                <div ref="html" class="htmlcontent"></div>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align:center;margin-top:20px" v-if="form.workState==4">

          <el-form-item label="驳回原因">
            <el-input v-model="form.overRule" type="textarea" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align:center;margin-top:20px" v-if="form.workState==2">
          <el-button type="primary" @click="review(3)" size="small"
            >审核通过</el-button
          >
          <el-button type="danger" @click="dialogVisible = true" size="small"
            >驳回</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="驳回" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="dataForm"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="原因">
          <el-input v-model="dataForm.overRule" placeholder="原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm()" size="small">取 消</el-button>
        <el-button type="primary" @click="review(4)" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ScriptWritingDetail, ScriptWritingReview } from "@/api/ScriptWriting";
import { Loading } from 'element-ui';
import _ from "lodash"
export default {
  data() {
    return {
      form: {},
      dialogVisible: false,
      dataForm: {},
      content:'',
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    back() {
      this.$router.back();
    },
    getDetail() {
      ScriptWritingDetail({ id: this.$route.query.id }).then((res) => {
        this.form = res.data;
        this.content = res.data.content
        this.$refs.html.innerHTML=this.content
        this.form.showTypeName = this.form.showType==1?'文本':'分镜'
        this.form.scanTypeName = this.form.showType==1?'免费':'授权'
        let chooseCreationTypeName=[]
        _.forEach(this.form.chooseCreationType,(v,k)=>{
            chooseCreationTypeName.push(v.creationTypeName)
        })
        this.form.chooseCreationTypeName = chooseCreationTypeName.join(',')
      });
    },
    resetForm() {
      this.dialogVisible = false;
      this.dataForm = {};
      this.$refs["form"].resetFields();
    },
    review(type) {
        if(type==4&&!this.dataForm.overRule){
            this.$message.error('请填写驳回原因')
            return false
        }

        if(type == 3){
          let loadingInstance1 = Loading.service({ fullscreen: true ,text:'正在审核'});
          ScriptWritingReview({
            id: this.$route.query.id,
            workState: type,
            overRule: this.dataForm.overRule,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("审核成功");
              loadingInstance1.close()

              let loadingInstance2 = Loading.service({ fullscreen: true ,text:'正在上架'});
              //上架
              ScriptWritingReview({
                id: this.$route.query.id,
                workState: 5,
                overRule: this.dataForm.overRule,
              }).then(res=>{
                this.$message.success("上架成功")
                loadingInstance2.close()

                this.back()

              })



            } else {

              this.$message.error(res.data);

            }
          });

        }else{

          ScriptWritingReview({
            id: this.$route.query.id,
            workState: type,
            overRule: this.dataForm.overRule,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("审核成功");
              this.back()
            } else {

              this.$message.error(res.data);

            }
          });

        }

    },
  },
};
</script>
<style lang="scss" scoped>
.review {
  .formDemo {
    margin-top: 20px;
  }
}
  .htmlcontent{
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
  }
</style>
